<template>
  <div class="config-list">
    <el-radio-group v-model="type">
      <div class="item">
        <el-radio label="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</el-radio>
        <span class="tip-info">日和周只能设置其中之一</span>
      </div>
      <div class="item">
        <el-radio label="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</el-radio>
        <span class="item-text">从</span>
        <el-select v-model="valueRange.start" class="w80" :disabled="type!==TYPE_RANGE || disableChoice">
          <template v-for="(v, k) of WEEK_MAP">
            <el-option :key="k" :value="v">{{ k }}</el-option>
          </template>
        </el-select>
        <span class="item-text">至</span>
        <el-select v-model="valueRange.end" class="w80" :disabled="type!==TYPE_RANGE || disableChoice">
          <template v-for="(v, k) of WEEK_MAP">
            <el-option :key="k" :value="v">{{ k }}</el-option>
          </template>
        </el-select>
      </div>
      <div class="item">
        <el-radio label="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</el-radio>
        <span class="item-text">从</span>
        <el-select v-model="valueLoop.start" class="w80" :disabled="type!==TYPE_LOOP || disableChoice">
          <template v-for="(v, k) of WEEK_MAP">
            <el-option :key="k" :value="v">{{ k }}</el-option>
          </template>
        </el-select>
        <span class="item-text">开始，间隔</span>
        <el-input-number v-model="valueLoop.interval" :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w120" />
        <span class="item-text">天</span>
      </div>
      <div class="item">
        <el-radio value="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</el-radio>
        <div class="list">
          <el-checkbox-group v-model="valueList">
            <template v-for="i in specifyRange">
              <el-checkbox :key="`key-${i}`" class="list-check-item" :label="i" :disabled="type!==TYPE_SPECIFY || disabled">{{ i }}</el-checkbox>
            </template>
          </el-checkbox-group>
        </div>
      </div>
    </el-radio-group>
  </div>
</template>

<script>
import mixin from './mixin'
import { replaceWeekName, WEEK_MAP_EN } from './const.js'

const WEEK_MAP = {
  '周一': 1,
  '周二': 2,
  '周三': 3,
  '周四': 4,
  '周五': 5,
  '周六': 6,
  // 按照国人习惯，将周日放到每周的最后一天
  '周日': 7
}

export default {
  name: 'Week',
  mixins: [mixin],
  props: {
    day: {
      type: String,
      default: '*'
    }
  },
  data() {
    return {
      WEEK_MAP,
      WEEK_MAP_EN
    }
  },
  computed: {
    disableChoice() {
      return (this.day && this.day !== '?') || this.disabled
    }
  },
  watch: {
    value_c(newVal, oldVal) {
      // 如果设置日，那么星期就直接不设置
      this.updateValue()
    },
    day(newVal) {
      // console.info('new day: ' + newVal)
      this.updateValue()
    }
  },
  created() {
    this.DEFAULT_VALUE = '*'
    // 0,7表示周日 1表示周一
    this.minValue = 1
    this.maxValue = 7
    this.valueRange.start = 1
    this.valueRange.end = 7
    this.valueLoop.start = 2
    this.valueLoop.interval = 1
    this.parseProp(this.prop)
  },
  methods: {
    updateValue() {
      this.$emit('change', this.disableChoice ? '?' : this.value_c)
    },
    preProcessProp(c) {
      return replaceWeekName(c)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "mixin.scss";
</style>
